<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-25 11:22:14
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-26 17:17:16
 * @FilePath: \bulletin-board\src\components\tableComponent\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-content">
    <table>
      <thead>
        <tr :class="[isWidth ? 'isWidth' : '']">
          <th v-show="isNoTitle">{{ isIndex ? '序号' : '' }}</th>
          <th v-for="(item, index) in header" :key="index">{{ item }}</th>
        </tr>
      </thead>
      <tbody ref="wrapper" :style="bodyStyle">
        <tr
          v-for="(item, index) in list"
          :key="index"
          :class="[isShow ? 'isShow' : '', isWidth ? 'isWidth' : '']"
        >
          <td v-show="isIndex">{{ index + 1 }}</td>
          <td v-for="(ite, i) in headerProp" :key="i">{{ item[ite] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  props: {
    isIndex: {
      type: Boolean,
      default: () => true
    },
    isNoTitle: {
      type: Boolean,
      default: () => true
    },
    header: {
      type: [Array, Object],
      default: () => []
    },
    list: {
      type: Array,
      default: () => []
    },
    bodyStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isWidth: {
      type: Boolean,
      default: () => false
    },
    isShow: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {}
  },
  computed: {
    headerProp() {
      if (this.list !== 0) {
        return Object.keys(this.list[0])
      } else {
        return []
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.bscorll = new BScroll(this.$refs.wrapper)
    })
  }
}
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0;
  margin-right: 2px;
}
.table-content {
  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    thead {
      text-align: left;
      background-color: #e5efff;
      width: 100%;
      display: block;
      tr {
        display: table;
        table-layout: fixed;
        width: 100%;
      }
      th {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        font-size: 16px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #2b4054;
        &:nth-child(1) {
          padding: 0 10px;
          width: 60px;
        }
      }
      .isWidth th {
        &:nth-child(2) {
          // padding: 0 22px;
          width: 55%;
        }
        &:nth-child(3) {
          // padding: 0 22px;
          width: 30%;
        }
      }
      .isNot {
        th {
          padding: 0 20px;
        }
      }
    }
    tbody {
      text-align: left;
      width: 100%;
      display: block;
      overflow: hidden;
      tr {
        width: 100%;
        display: table;
        table-layout: fixed;
        td {
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
          font-size: 16px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #2b4054;
          &:nth-child(1) {
            padding: 0 10px;
            width: 60px;
          }
        }
      }
      .isShow {
        > td:nth-child(2) {
          // padding: 0 22px;
          width: 60px;
        }
      }

      .isWidth td {
        &:nth-child(2) {
          // padding: 0 22px;
          width: 55%;
        }
        &:nth-child(3) {
          // padding: 0 22px;
          width: 30%;
        }
      }
      tr:nth-child(2n-1) {
        background-color: #ffffff;
      }
      tr:nth-child(2n) {
        background: rgba(229, 239, 255, 0.3);
      }
    }
  }
}
</style>
